<template>
  <div class="mentalityTestWrap">
    <div class="titleBar">
      <b>心理健康测评</b>
      <!-- <i>看看压力有多大，调整心态</i> -->
    </div>
    <div class="issueBox">
      <p>心理健康测评是一种探索自我非常好的工具，它能让我们对当下遇到的心理困境更为清晰，也能告诉我们应该尽快寻求帮助走出至暗时刻</p>
      <span class="score">频率：从无 1分 轻度 2分 中度 3分 偏重 4分 严重5分</span>
      <div class="contentBox">
        <div v-for="(item, index) in issueList" :key="index">
          <div v-show="index === tabNum">
            <div class="titles">
              <i>{{ index * 1 + 1 }}</i>
              <b>/{{ issueList.length }}.</b><b>{{ item }}</b>
            </div>
            <div class="answer flex-h">
              <span class="flex1" @click="clcyes(index, '5')"><img :src="tabindex == '5' ? img_s : img_n" alt="" /><b>严重</b></span>
              <span class="flex1" @click="clcyes(index, '4')"><img :src="tabindex == '4' ? img_s : img_n" alt="" /><b>偏重</b></span>
              <span class="flex1" @click="clcyes(index, '3')"><img :src="tabindex == '3' ? img_s : img_n" alt="" /><b>中度</b></span>
              <span class="flex1" @click="clcyes(index, '2')"><img :src="tabindex == '2' ? img_s : img_n" alt="" /><b>轻度</b></span>
              <span class="flex1" @click="clcyes(index, '1')"><img :src="tabindex == '1' ? img_s : img_n" alt="" /><b>从无</b></span>
            </div>
            <span v-if="tabNum < issueList.length - 1" class="btn" @click="next(index)">下一题</span>
            <div v-else @click="saveRecord(index)" class="btn">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { infoTopicComment } from '~/api/identity'
// import { XTextarea } from 'vux'
// import ls from 'store2'
var issueAry = [
  '我不喜欢参加学校的课外活动',
  '我心情时好时坏',
  '做作业必须反复检查',
  '感到人们对我不友好，不喜欢我',
  '我感到苦闷',
  '我感到紧张或容易紧张',
  '我学习劲头时高时低',
  '我对现在的学校生活感到不适应',
  '我看不惯现在的社会风气',
  '为保证正确，做事必须做得很慢',
  '我的想法总与别人不一样',
  '总担心自己的衣服是否整齐',
  '容易哭泣',
  '我感到前途没有希望',
  '我感到坐立不安，心神不定',
  '我经常责怪自己',
  '当别人看着我或谈论我时，感到不自在',
  '感到别人不理解我，不同情我',
  '我常发脾气，想控制但控制不住',
  '觉得别人想占我的便宜',
  '想大叫或摔东西',
  '总在想一些不必要的事情',
  '必须反复洗手或反复数数',
  '总感到有人在背后谈论我',
  '时常与人争论、抬杠',
  '我觉得对大多数人都不可信任',
  '我对做作业的热情忽高忽低',
  '同学考试成绩比我高，我感到难过',
  '我不适应老师的教学方法',
  '老师对我不公平',
  '我感到学习负担很重',
  '我对同学忽冷忽热',
  '上课时，总担心老师会提问自己',
  '我无缘无故地突然感到害怕',
  '我对老师时而亲近，时而疏远',
  '一听说要考试，心里就感到紧张',
  '别的同学穿戴比我好，有钱，我感到不舒服',
  '我讨厌做作业',
  '家里环境干扰我的学习',
  '我讨厌上学',
  '我不喜欢班里的风气',
  '父母对我不公平',
  '感到心里烦躁',
  '我常常无精打采，提不起劲来',
  '我感情容易受到别人的伤害',
  '觉得心里不踏实',
  '别人对我的表现评价不恰当',
  '明知担心没有用，但总害怕考不好',
  '总觉得别人在跟我作对',
  '我容易激动和烦恼',
  '同异性在一起时，感到害羞不自在',
  '有想伤害他人或打人的冲动',
  '我对父母时而亲热，时而冷淡',
  '我对比我强的同学并不服气',
  '我讨厌考试',
  '心里总觉得有事',
  '经常有自杀的念头',
  '有想摔东西的冲动',
  '要求别人十全十美',
  '同学考试成绩比我高，但能力并不比我强',
]
export default {
  components: {},
  data() {
    return {
      tabindex: '',
      tabNum: 0,
      img_s: require('~/static/images/icon_radio_s.png'),
      img_n: require('~/static/images/search_icon_nor.png'),
      issueList: issueAry,
      mbtiScore: [],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    saveRecord(indexs) {
      if (!this.mbtiScore[indexs]) {
        this.$vux.toast.text('您还未做选择')
        return
      }
      let sum = this.mbtiScore.join(',')
      this.$router.push({
        path: '../sxAssess/testResult?id=3&score=' + sum,
      })
    },
    clcyes(indexs, score, check) {
      this.tabindex = score
      this.chooseStr = score
      this.mbtiScore[indexs] = score
    },
    next(indexs) {
      if (!this.mbtiScore[indexs]) {
        this.$vux.toast.text('您还未做选择')
        return
      }
      this.tabNum = indexs + 1
      this.tabindex = ''
    },
  },
}
</script>

<style lang="less" scoped>
.mentalityTestWrap {
  width: 6.9rem;
  height: auto;
  padding-bottom: 0.5rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
  border-radius: 0.2rem;
  margin: 0.3rem auto;
  //   bg_luqu
  .titleBar {
    height: 1.8rem;
    width: 100%;
    background: url('~/static/images/bg_xinli.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 0.3rem;
    b,
    i {
      display: block;
    }
    b {
      font-size: 0.4rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      height: 1.8rem;
      line-height: 1.8rem;
    }
    i {
      font-size: 0.28rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
  .issueBox {
    height: auto;
    padding: 0.3rem;
    box-sizing: border-box;
    p {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      line-height: 0.45rem;
    }
    .score {
      display: block;
      height: 0.8rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.1rem;
      text-align: center;
      line-height: 0.8rem;
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      margin-top: 0.3rem;
    }
    .contentBox {
      padding-top: 0.3rem;
      border-top: 0.01rem solid rgba(229, 232, 237, 1);
      margin-top: 0.3rem;
      .titles {
        i,
        b {
          font-size: 0.34rem;
          font-weight: 600;
          color: rgba(34, 34, 34, 1);
        }
      }
      .answer {
        margin-top: 0.5rem;
        span {
          text-align: left;
          img {
            width: 0.28rem;
            height: 0.28rem;
          }
          b {
            font-size: 0.3rem;
            font-weight: 600;
            color: rgba(34, 34, 34, 1);
            margin-left: 0.1rem;
          }
        }
      }
      .btn {
        width: 100%;
        height: 0.88rem;
        background: rgba(255, 173, 13, 1);
        border-radius: 0.5rem;
        text-align: center;
        line-height: 0.88rem;
        font-size: 0.3rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        margin-top: 0.5rem;
        display: block;
      }
    }
  }
}
</style>
